<template>
   <li class="dropdown-option dropdown-item" :style="sty">
      <slot></slot>
   </li>
</template>

<script lang='ts'>
import { defineComponent, reactive } from 'vue'

export default defineComponent({
  name: 'DropDownItem',
  props: {
    disabled: {
      type: Boolean,
      default: false
    }
  },
  setup (props) {
    const sty = !props.disabled ? {} : reactive({
      color: '#6c6c6c',
      pointerEvents: 'none',
      backgroundColor: 'transparent'
    })

    return {
      sty
    }
  }
})
</script>

 <style>
  .is-disabled {
    color: #6c6c6c !important;
    /* 表示鼠标事件不可用 */
    pointer-events: none;
    background-color:transparent;
  }
 </style>
